<template>
	<view class="viewport">
		<!-- 导航栏 -->
		<view class="navbar" :style="{ paddingTop: safeTop + 'px' }">
			<navigator
				open-type="navigateBack"
				class="back icon-left"
				hover-class="none"
			></navigator>
			<view class="title">个人信息</view>
		</view>
		<!-- 头像 -->
		<view class="avatar">
			<view class="avatar-content" @tap="onAvatarChange">
				<image class="image" :src="profile.avatar" mode="aspectFill" />
				<text class="text">点击修改头像</text>
			</view>
		</view>
		<!-- 表单 -->
		<view class="form">
			<!-- 表单内容 -->
			<view class="form-content">
				<view class="form-item">
					<text class="label">账号</text>
					<text class="account">{{ profile.account }}</text>
				</view>
				<view class="form-item">
					<text class="label">昵称</text>
					<input
						v-model="profile.nickname"
						class="input"
						type="text"
						placeholder="请填写昵称"
					/>
				</view>
				<view class="form-item">
					<text class="label">性别</text>
					<!-- 列表 list ，显示左侧图标 -->
					<!-- 			<uni-data-checkbox
						selectedColor="#27ba9b"
						icon="left"
						v-model="profile.gender"
						:localdata="[
							{ value: '男', text: '男' },
							{ value: '女', text: '女' },
						]"
					></uni-data-checkbox> -->
					<radio-group @change="changeGender">
						<label class="radio">
							<radio
								value="男"
								color="#27ba9b"
								:checked="profile.gender === '男'"
							/>
							男
						</label>
						<label class="radio">
							<radio
								value="女"
								color="#27ba9b"
								:checked="profile.gender === '女'"
							/>
							女
						</label>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="label">生日</text>
					<picker
						class="picker"
						mode="date"
						start="1900-01-01"
						:end="currentDate"
						v-model="profile.birthday"
					>
						<view v-if="profile.birthday">{{ profile.birthday }}</view>
						<view class="placeholder" v-else>请选择日期</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">城市</text>
					<picker
						@change="changeRegion"
						class="picker"
						mode="region"
						:value="profile.fullLocation && profile.fullLocation.split(' ')"
					>
						<view v-if="profile.fullLocation">{{ profile.fullLocation }}</view>
						<view class="placeholder" v-else>请选择城市</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">职业</text>
					<input
						class="input"
						type="text"
						placeholder="请填写职业"
						v-model="profile.profession"
					/>
				</view>
			</view>
			<!-- 提交按钮 -->
			<button class="form-button" @tap="saveUserInfo">保 存</button>
		</view>
	</view>
</template>

<script>
import { getUserProfile, putMemberProfileAPI } from '@/services/profile'
import { systemMixin, userMixin } from '@/store/mixinVuex'
// 1、数据来源不清晰
// 2、变量名容易冲突
export default {
	mixins: [systemMixin, userMixin],
	data() {
		return {
			profile: {},
			currentDate: new Date(),
		}
	},
	onLoad() {
		this.getUserProfile()
	},
	methods: {
		async saveUserInfo() {
			// 解构出接口需要的字段信息
			const { nickname, gender, birthday, provinceCode, cityCode, countyCode } =
				this.profile
			// 调用接口把字段传递给后端
			const res = await putMemberProfileAPI({
				nickname,
				gender,
				birthday,
				provinceCode,
				cityCode,
				countyCode,
			})
			uni.showToast({
				title: '更新个人信息成功',
			})
			// 把个人中心页面的昵称也要更新一下，在vuex里面的，调用mutations进行数据的修改
			this.setProfile({
				nickname,
			})

			// 跳转上一个页面
			setTimeout(() => {
				uni.navigateBack() // 从哪来回哪去
			}, 500)
		},
		changeRegion(e) {
			// console.log(e)
			this.profile.fullLocation = e.detail.value.join(' ') // 数据进行回显
			// 因为提交接口的时候，后端需要省市区的编码，每一个编码的字段不同，所以需要单独处理
			const [provinceCode, cityCode, countyCode] = e.detail.code
			Object.assign(this.profile, { provinceCode, cityCode, countyCode })
		},
		// 监听radio-group的change事件，通过事件对象获取用户选择的结果
		changeGender(e) {
			// console.log(e)
			this.profile.gender = e.detail.value
		},
		async getUserProfile() {
			const { result } = await getUserProfile()
			this.setProfile(result)
			this.profile = result
		},
		onAvatarChange() {
			// 调用微信选择图片的api
			uni.chooseMedia({
				count: 1,
				mediaType: ['image'],
				success: (res) => {
					uni.uploadFile({
						url: '/member/profile/avatar', // 接口的地址
						filePath: res.tempFiles[0].tempFilePath, // 文件的临时路径
						name: 'file',
						success: ({ data }) => {
							const res = JSON.parse(data) // 后端返回的json数据转化成对象
							// 当前页面更新头像数据
							this.profile.avatar = res.result.avatar // 后端返回的图片的存储路径赋值data里面
							// 把vuex中的头像进行更新
							this.setProfile({
								avatar: res.result.avatar,
							})
							uni.showToast({
								title: '更新头像成功',
							})
						},
					})
				},
			})
		},
	},
}
</script>

<style lang="scss">
page {
	background-color: #f4f4f4;
}

.viewport {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
	background-size: auto 420rpx;
	background-repeat: no-repeat;
}

// 导航栏
.navbar {
	position: relative;

	.title {
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		font-weight: 500;
		color: #fff;
	}

	.back {
		position: absolute;
		height: 40px;
		width: 40px;
		left: 0;
		font-size: 20px;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

// 头像
.avatar {
	text-align: center;
	width: 100%;
	height: 260rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	.image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background-color: #eee;
	}

	.text {
		display: block;
		padding-top: 20rpx;
		line-height: 1;
		font-size: 26rpx;
		color: #fff;
	}
}

// 表单
.form {
	background-color: #f4f4f4;

	&-content {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	&-item {
		display: flex;
		height: 96rpx;
		line-height: 46rpx;
		padding: 25rpx 10rpx;
		background-color: #fff;
		font-size: 28rpx;
		border-bottom: 1rpx solid #ddd;

		&:last-child {
			border: none;
		}

		.label {
			width: 180rpx;
			color: #333;
		}

		.account {
			color: #666;
		}

		.input {
			flex: 1;
			display: block;
			height: 46rpx;
		}

		.radio {
			margin-right: 20rpx;
		}

		.picker {
			flex: 1;
		}
		.placeholder {
			color: #808080;
		}
	}

	&-button {
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 30rpx 20rpx;
		color: #fff;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: #27ba9b;
	}
}
</style>
